<template>
  <div class="components">
    <div class="components-title">父组件不变的部分</div>

    <div class="components-view">
      <!-- 无name属性默认default -->
      <RouterView style="color: salmon"/>

      <RouterView name="ComponentsChildrenA" style="color: slateblue"/>

      <RouterView name="ComponentsChildrenB" style="color: skyblue"/>
    </div>
  </div>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'Components'
});
</script>

<style scoped>
.components {
  display: flex;
  flex-flow: column;
  align-items: center;
}

.components-title {
  font-size: 18px;
}

.components-view {
  font-size: 13px;
  font-weight: bold;
  color: skyblue;
  margin-top: 10px;
}
</style>